<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./quickSearch.css">
</head>

<body>
    <div class="quickSearch">
        <div class="quickSearch-top">
            <img src="../左箭头.png" alt="">
            <span>快捷支付</span>
        </div>
    </div>
    <div class="bankCard">
        <div class="bankCardid">
            <span>银行卡号</span>
            <input type="text" placeholder="请输入">
            <img src="../相机.png" alt="">
        </div>
        <div class="phone">
            <span>手机号码</span>
            <input type="text" placeholder="银行预留手机号">
        </div>
        <div class="verificationCode">
            <span>验证码</span>
            <input type="text" onclick="clickEvent()" id="code" placeholder="请输入">
            <canvas id="canvas" width="120" height="30" style="cursor: pointer"></canvas>
        </div>
    </div>
    <script>
        var numArr = []
        var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext('2d');
        draw();
        canvas.onclick = function () {
            ctx.clearRect(0, 0, 120, 30);
            draw();
        }
        function draw() {
            /*绘制一个矩形  颜色随机*/
            ctx.fillStyle = randColor(170, 250);
            ctx.fillRect(0, 0, 120, 50);
            var data = 'qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890';

            for (var i = 0; i <= 90; i += 30) {
                var c = data[randNum(0, data.length - 1)]; //index 随机数 ===>>>[0,data.length-1]
                numArr.push(c) //生成的四个随机数存数组
                ctx.fillStyle = randColor(60, 160);
                ctx.font = randNum(15, 40) + 'px SimHei';
                ctx.fillText(c, i + randNum(0, 15), randNum(15, 30));
            }
            /*绘制干扰线*/
            for (var i = 0; i < 10; i++) {
                ctx.beginPath();
                ctx.moveTo(randNum(0, 120), randNum(0, 120));
                ctx.lineTo(randNum(0, 120), randNum(0, 120));
                ctx.strokeStyle = randColor(60, 160);
                ctx.stroke();
            }
            /*绘制干扰点*/
            // for (var i = 0; i < 10; i++) {
            //   ctx.beginPath();
            //   ctx.arc(randNum(0, 120), randNum(0, 30), randNum(1, 5), 0, 2 * Math.PI);
            //   ctx.strokeStyle = randColor(60, 160);
            //   ctx.stroke()
            // }
        }

        function randColor(min, max) {
            var r = Math.floor(Math.random() * (max - min + 1) + min); //170+[0,80)
            var g = Math.floor(Math.random() * (max - min + 1) + min);
            var b = Math.floor(Math.random() * (max - min + 1) + min);
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }

        function randNum(min, max) {
            var num = Math.floor(Math.random() * (max - min + 1) + min);
            return num;
        }
        function clickEvent() {
            var codeNum = numArr.join("") //生成的验证码
            console.log(codeNum);
            var inputValue = document.getElementById("code").value //输入的验证码
            var reg = /^[a-zA-Z0-9]{4}$/;
            if (reg.test(inputValue)) {
                if (inputValue.toLowerCase() == codeNum.toLowerCase()) {
                    alert("验证码成功！");
                } else {
                    alert("验证码错误！");
                }
                console.log(inputValue.toLowerCase())
                console.log(codeNum.toLowerCase())
            } else {
                alert("验证码格式错误")
            }
        }
    </script>
    <div class="select">
        <span>查询</span>
    </div>
    <div class="bottom-box">
        <span>您可以 <a>登录手机银行</a> 进行查询</span>
    </div>
</body>

</html>